<!-- 元数据检索器组件 - 按设备/时间/地域快速定位 -->
<template>
  <div class="metadata-retriever">
    <div class="retriever-header">
      <div class="header-title">
        <el-icon><Search /></el-icon>
        <span>元数据检索</span>
      </div>
      <div class="header-actions">
        <el-button size="small" text @click="clearFilters">
          <el-icon><RefreshLeft /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 快速搜索 -->
    <div class="search-section">
      <el-input
        v-model="searchText"
        placeholder="搜索数据名称、标签..."
        clearable
        @input="handleSearchInput"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>

    <!-- 过滤器面板 -->
    <div class="filters-panel">
      <!-- 设备过滤 -->
      <div class="filter-group">
        <div class="filter-label">
          <el-icon><Monitor /></el-icon>
          <span>设备类型</span>
        </div>
        <el-checkbox-group v-model="filters.devices" @change="applyFilters">
          <el-checkbox label="radar">雷达设备</el-checkbox>
          <el-checkbox label="communication">通信设备</el-checkbox>
          <el-checkbox label="jamming">干扰设备</el-checkbox>
          <el-checkbox label="detection">侦测设备</el-checkbox>
        </el-checkbox-group>
      </div>

      <!-- 时间过滤 -->
      <div class="filter-group">
        <div class="filter-label">
          <el-icon><Clock /></el-icon>
          <span>时间范围</span>
        </div>
        <div class="time-filter">
          <el-date-picker
            v-model="filters.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="small"
            @change="applyFilters"
          />
        </div>
        <div class="quick-time-buttons">
          <el-button size="small" @click="setTimeRange('today')">今天</el-button>
          <el-button size="small" @click="setTimeRange('week')">本周</el-button>
          <el-button size="small" @click="setTimeRange('month')">本月</el-button>
        </div>
      </div>

      <!-- 地域过滤 -->
      <div class="filter-group">
        <div class="filter-label">
          <el-icon><Location /></el-icon>
          <span>地理位置</span>
        </div>
        <el-select
          v-model="filters.locations"
          multiple
          placeholder="选择地区"
          size="small"
          @change="applyFilters"
        >
          <el-option label="北京" value="beijing" />
          <el-option label="上海" value="shanghai" />
          <el-option label="广州" value="guangzhou" />
          <el-option label="深圳" value="shenzhen" />
          <el-option label="杭州" value="hangzhou" />
          <el-option label="南京" value="nanjing" />
        </el-select>
        
        <!-- 地图快捷选择 -->
        <div class="location-map" @click="showLocationSelector">
          <div class="map-placeholder">
            🗺️ 点击地图选择
          </div>
        </div>
      </div>

      <!-- 数据属性过滤 -->
      <div class="filter-group">
        <div class="filter-label">
          <el-icon><Setting /></el-icon>
          <span>数据属性</span>
        </div>
        <div class="attribute-filters">
          <div class="attribute-item">
            <label>频率范围 (MHz)</label>
            <el-slider
              v-model="filters.frequencyRange"
              range
              :min="0"
              :max="6000"
              :step="100"
              @change="applyFilters"
            />
            <div class="range-display">
              {{ filters.frequencyRange[0] }} - {{ filters.frequencyRange[1] }} MHz
            </div>
          </div>
          
          <div class="attribute-item">
            <label>信号强度 (dBm)</label>
            <el-slider
              v-model="filters.signalStrength"
              range
              :min="-120"
              :max="0"
              :step="5"
              @change="applyFilters"
            />
            <div class="range-display">
              {{ filters.signalStrength[0] }} - {{ filters.signalStrength[1] }} dBm
            </div>
          </div>
          
          <div class="attribute-item">
            <label>数据大小</label>
            <el-select v-model="filters.dataSize" @change="applyFilters">
              <el-option label="全部" value="" />
              <el-option label="< 100MB" value="small" />
              <el-option label="100MB - 1GB" value="medium" />
              <el-option label="> 1GB" value="large" />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="results-section">
      <div class="results-header">
        <span class="results-count">找到 {{ filteredResults.length }} 条记录</span>
        <el-button size="small" @click="exportResults">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
      
      <div class="results-list">
        <div
          v-for="result in paginatedResults"
          :key="result.id"
          class="result-item"
          @click="selectResult(result)"
          :class="{ active: selectedResult?.id === result.id }"
        >
          <div class="result-icon">
            <el-icon v-if="result.type === 'radar'"><Cpu /></el-icon>
            <el-icon v-else-if="result.type === 'communication'"><Message /></el-icon>
            <el-icon v-else-if="result.type === 'analysis'"><TrendCharts /></el-icon>
            <el-icon v-else><Document /></el-icon>
          </div>
          
          <div class="result-content">
            <div class="result-name">{{ result.name }}</div>
            <div class="result-meta">
              <el-tag size="small" :type="getTypeColor(result.type)">
                {{ getTypeLabel(result.type) }}
              </el-tag>
              <span class="result-location">
                <el-icon><Location /></el-icon>
                {{ result.location }}
              </span>
              <span class="result-time">{{ formatTime(result.timestamp) }}</span>
            </div>
            <div class="result-details">
              <span v-if="result.frequency">频率: {{ result.frequency }}MHz</span>
              <span v-if="result.strength">强度: {{ result.strength }}dBm</span>
              <span v-if="result.size">大小: {{ result.size }}</span>
            </div>
          </div>
          
          <div class="result-actions">
            <el-button size="small" text @click.stop="locateResult(result)">
              <el-icon><Position /></el-icon>
            </el-button>
            <el-button size="small" text @click.stop="viewDetails(result)">
              <el-icon><View /></el-icon>
            </el-button>
          </div>
        </div>
        
        <!-- 无结果提示 -->
        <div v-if="filteredResults.length === 0" class="no-results">
          <el-icon><DocumentRemove /></el-icon>
          <span>未找到匹配的数据</span>
        </div>
      </div>
      
      <!-- 分页 -->
      <div v-if="filteredResults.length > pageSize" class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="filteredResults.length"
          layout="prev, pager, next"
          size="small"
        />
      </div>
    </div>

    <!-- 选中数据详情 -->
    <div v-if="selectedResult && showDetails" class="selected-details">
      <div class="details-header">
        <span>{{ selectedResult.name }}</span>
        <el-button size="small" text @click="showDetails = false">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
      <div class="details-content">
        <div class="detail-row">
          <label>设备ID:</label>
          <span>{{ selectedResult.deviceId || '--' }}</span>
        </div>
        <div class="detail-row">
          <label>采集时间:</label>
          <span>{{ formatDateTime(selectedResult.timestamp) }}</span>
        </div>
        <div class="detail-row">
          <label>地理坐标:</label>
          <span>{{ selectedResult.coordinates || '--' }}</span>
        </div>
        <div class="detail-row">
          <label>数据格式:</label>
          <span>{{ selectedResult.format || '--' }}</span>
        </div>
        <div class="detail-row">
          <label>处理状态:</label>
          <el-tag size="small" :type="selectedResult.processed ? 'success' : 'warning'">
            {{ selectedResult.processed ? '已处理' : '待处理' }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search,
  RefreshLeft,
  Monitor,
  Clock,
  Location,
  Setting,
  Download,
  Cpu,
  Message,
  TrendCharts,
  Document,
  Position,
  View,
  DocumentRemove,
  Close
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  selectedData: {
    type: Object,
    default: null
  },
  searchFilters: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['filterChange', 'dataLocate'])

// 数据状态
const searchText = ref('')
const selectedResult = ref(null)
const showDetails = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)

// 过滤器状态
const filters = reactive({
  devices: [],
  timeRange: null,
  locations: [],
  frequencyRange: [0, 6000],
  signalStrength: [-120, 0],
  dataSize: ''
})

// 模拟数据
const mockData = ref([
  {
    id: 'data-001',
    name: 'S波段雷达信号_001',
    type: 'radar',
    location: '北京',
    timestamp: new Date('2024-01-15 14:30:00'),
    frequency: 2800,
    strength: -45,
    size: '256MB',
    deviceId: 'RDR-001',
    coordinates: '39.9042°N, 116.4074°E',
    format: 'IQ',
    processed: true
  },
  {
    id: 'data-002',
    name: 'UHF通信信号_002',
    type: 'communication',
    location: '上海',
    timestamp: new Date('2024-01-14 16:20:00'),
    frequency: 450,
    strength: -60,
    size: '128MB',
    deviceId: 'COM-002',
    coordinates: '31.2304°N, 121.4737°E',
    format: 'PCM',
    processed: false
  },
  {
    id: 'data-003',
    name: 'X波段雷达分析结果',
    type: 'analysis',
    location: '广州',
    timestamp: new Date('2024-01-13 10:15:00'),
    frequency: 9400,
    strength: -35,
    size: '1.2GB',
    deviceId: 'RDR-003',
    coordinates: '23.1291°N, 113.2644°E',
    format: 'JSON',
    processed: true
  },
  {
    id: 'data-004',
    name: 'VHF通信数据',
    type: 'communication',
    location: '深圳',
    timestamp: new Date('2024-01-12 09:45:00'),
    frequency: 150,
    strength: -70,
    size: '64MB',
    deviceId: 'COM-004',
    coordinates: '22.3193°N, 114.1694°E',
    format: 'WAV',
    processed: true
  }
])

// 过滤后的结果
const filteredResults = computed(() => {
  let results = mockData.value

  // 文本搜索
  if (searchText.value) {
    const searchLower = searchText.value.toLowerCase()
    results = results.filter(item =>
      item.name.toLowerCase().includes(searchLower) ||
      item.location.toLowerCase().includes(searchLower) ||
      item.deviceId?.toLowerCase().includes(searchLower)
    )
  }

  // 设备类型过滤
  if (filters.devices.length > 0) {
    results = results.filter(item => filters.devices.includes(item.type))
  }

  // 时间范围过滤
  if (filters.timeRange && filters.timeRange.length === 2) {
    const [startTime, endTime] = filters.timeRange
    results = results.filter(item =>
      item.timestamp >= startTime && item.timestamp <= endTime
    )
  }

  // 地域过滤
  if (filters.locations.length > 0) {
    const locationMap = {
      beijing: '北京',
      shanghai: '上海',
      guangzhou: '广州',
      shenzhen: '深圳',
      hangzhou: '杭州',
      nanjing: '南京'
    }
    const selectedCities = filters.locations.map(loc => locationMap[loc])
    results = results.filter(item => selectedCities.includes(item.location))
  }

  // 频率范围过滤
  results = results.filter(item =>
    item.frequency >= filters.frequencyRange[0] &&
    item.frequency <= filters.frequencyRange[1]
  )

  // 信号强度过滤
  results = results.filter(item =>
    item.strength >= filters.signalStrength[0] &&
    item.strength <= filters.signalStrength[1]
  )

  // 数据大小过滤
  if (filters.dataSize) {
    results = results.filter(item => {
      const sizeNum = parseFloat(item.size)
      const unit = item.size.toLowerCase()
      
      switch (filters.dataSize) {
        case 'small':
          return unit.includes('mb') && sizeNum < 100
        case 'medium':
          return (unit.includes('mb') && sizeNum >= 100) || 
                 (unit.includes('gb') && sizeNum <= 1)
        case 'large':
          return unit.includes('gb') && sizeNum > 1
        default:
          return true
      }
    })
  }

  return results
})

// 分页结果
const paginatedResults = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredResults.value.slice(start, end)
})

// 搜索输入处理
const handleSearchInput = () => {
  currentPage.value = 1
  applyFilters()
}

// 应用过滤器
const applyFilters = () => {
  emit('filterChange', { ...filters, searchText: searchText.value })
}

// 清空过滤器
const clearFilters = () => {
  searchText.value = ''
  filters.devices = []
  filters.timeRange = null
  filters.locations = []
  filters.frequencyRange = [0, 6000]
  filters.signalStrength = [-120, 0]
  filters.dataSize = ''
  currentPage.value = 1
  applyFilters()
  ElMessage.success('过滤条件已清空')
}

// 设置时间范围
const setTimeRange = (type) => {
  const now = new Date()
  let startTime, endTime

  switch (type) {
    case 'today':
      startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate())
      endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
      break
    case 'week':
      const weekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
      startTime = new Date(weekStart.getFullYear(), weekStart.getMonth(), weekStart.getDate())
      endTime = now
      break
    case 'month':
      startTime = new Date(now.getFullYear(), now.getMonth(), 1)
      endTime = now
      break
  }

  filters.timeRange = [startTime, endTime]
  applyFilters()
}

// 显示位置选择器
const showLocationSelector = () => {
  ElMessage.info('地图选择器功能开发中...')
}

// 选择结果
const selectResult = (result) => {
  selectedResult.value = result
  emit('dataLocate', result)
}

// 定位结果
const locateResult = (result) => {
  emit('dataLocate', result)
  ElMessage.success(`已定位到: ${result.name}`)
}

// 查看详情
const viewDetails = (result) => {
  selectedResult.value = result
  showDetails.value = true
}

// 导出结果
const exportResults = () => {
  const data = filteredResults.value.map(item => ({
    名称: item.name,
    类型: getTypeLabel(item.type),
    位置: item.location,
    时间: formatDateTime(item.timestamp),
    频率: `${item.frequency}MHz`,
    强度: `${item.strength}dBm`,
    大小: item.size
  }))

  const csvContent = [
    Object.keys(data[0]).join(','),
    ...data.map(row => Object.values(row).join(','))
  ].join('\n')

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = `metadata_search_results_${Date.now()}.csv`
  link.click()

  ElMessage.success('搜索结果已导出')
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colorMap = {
    radar: 'success',
    communication: 'primary',
    analysis: 'warning',
    jamming: 'danger'
  }
  return colorMap[type] || 'info'
}

// 获取类型标签
const getTypeLabel = (type) => {
  const labelMap = {
    radar: '雷达',
    communication: '通信',
    analysis: '分析',
    jamming: '干扰'
  }
  return labelMap[type] || '未知'
}

// 格式化时间
const formatTime = (time) => {
  return time.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化详细时间
const formatDateTime = (time) => {
  return time.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  // 初始应用过滤器
  applyFilters()
})
</script>

<style scoped>
.metadata-retriever {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #263445;
  padding: 1vh 1vw;
  overflow: hidden;
}

/* 检索器头部 */
.retriever-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vh 0;
  border-bottom: 1px solid #2d3a4b;
  margin-bottom: 1vh;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
  font-weight: 600;
  font-size: 1rem;
}

/* 搜索区域 */
.search-section {
  margin-bottom: 1.5vh;
}

/* 过滤器面板 */
.filters-panel {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1vh;
}

.filter-group {
  margin-bottom: 2vh;
  padding: 1vh;
  background: #1f2d3d;
  border-radius: 0.5vh;
  border-left: 0.3vw solid #409EFF;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1vh;
}

/* 时间过滤器 */
.time-filter {
  margin-bottom: 1vh;
}

.quick-time-buttons {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
}

/* 位置地图 */
.location-map {
  margin-top: 1vh;
  height: 8vh;
  background: #0a0f1b;
  border-radius: 0.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.location-map:hover {
  background: #1f2d3d;
  transform: scale(1.02);
}

.map-placeholder {
  color: #8591a3;
  font-size: 0.9rem;
}

/* 属性过滤器 */
.attribute-filters {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}

.attribute-item {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.attribute-item label {
  color: #bfcbd9;
  font-size: 0.8rem;
  font-weight: 500;
}

.range-display {
  color: #8591a3;
  font-size: 0.7rem;
  text-align: center;
}

/* 结果区域 */
.results-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5vh 0;
  border-bottom: 1px solid #2d3a4b;
  margin-bottom: 1vh;
}

.results-count {
  color: #bfcbd9;
  font-size: 0.8rem;
}

.results-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 0.5vw;
}

/* 结果项 */
.result-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh;
  margin-bottom: 0.5vh;
  background: #1f2d3d;
  border-radius: 0.5vh;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 0.2vw solid transparent;
}

.result-item:hover {
  background: #2d3a4b;
  border-left-color: #409EFF;
  transform: translateX(0.2vw);
}

.result-item.active {
  background: rgba(64, 158, 255, 0.1);
  border-left-color: #409EFF;
}

.result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #409EFF;
  width: 2.5vw;
}

.result-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.result-name {
  color: #bfcbd9;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  flex-wrap: wrap;
}

.result-location, .result-time {
  display: flex;
  align-items: center;
  gap: 0.2vw;
  color: #8591a3;
  font-size: 0.7rem;
}

.result-details {
  display: flex;
  gap: 1vw;
  flex-wrap: wrap;
  font-size: 0.7rem;
  color: #8591a3;
}

.result-actions {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.result-item:hover .result-actions {
  opacity: 1;
}

/* 无结果 */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 0;
  color: #8591a3;
  font-size: 0.9rem;
  gap: 1vh;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 1vh 0;
  border-top: 1px solid #2d3a4b;
  margin-top: 1vh;
}

/* 选中详情 */
.selected-details {
  position: absolute;
  top: 8vh;
  right: 1vw;
  width: 25vw;
  background: rgba(31, 45, 61, 0.95);
  border: 1px solid #2d3a4b;
  border-radius: 0.5vh;
  backdrop-filter: blur(0.8vh);
  z-index: 100;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1.2vw;
  border-bottom: 1px solid #2d3a4b;
  color: #bfcbd9;
  font-weight: 600;
  font-size: 0.9rem;
}

.details-content {
  padding: 1vh 1.2vw;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.8vh 0;
  font-size: 0.8rem;
}

.detail-row label {
  color: #8591a3;
  font-weight: 500;
}

.detail-row span {
  color: #bfcbd9;
}

/* 滚动条样式 */
.filters-panel::-webkit-scrollbar,
.results-list::-webkit-scrollbar {
  width: 0.4vw;
}

.filters-panel::-webkit-scrollbar-track,
.results-list::-webkit-scrollbar-track {
  background: #1f2d3d;
  border-radius: 0.2vw;
}

.filters-panel::-webkit-scrollbar-thumb,
.results-list::-webkit-scrollbar-thumb {
  background: #2d3a4b;
  border-radius: 0.2vw;
  transition: background 0.3s ease;
}

.filters-panel::-webkit-scrollbar-thumb:hover,
.results-list::-webkit-scrollbar-thumb:hover {
  background: #409EFF;
}

/* Element Plus 组件深色主题覆盖 */
.metadata-retriever :deep(.el-input) {
  background: #1f2d3d !important;
}

.metadata-retriever :deep(.el-input__wrapper) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.metadata-retriever :deep(.el-input__inner) {
  background: #1f2d3d !important;
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-input__inner::placeholder) {
  color: #8591a3 !important;
}

.metadata-retriever :deep(.el-checkbox) {
  color: #bfcbd9 !important;
  margin-bottom: 0.5vh !important;
}

.metadata-retriever :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409EFF !important;
  border-color: #409EFF !important;
}

.metadata-retriever :deep(.el-checkbox__inner) {
  background-color: #1f2d3d !important;
  border-color: #2d3a4b !important;
}

.metadata-retriever :deep(.el-select) {
  background: #1f2d3d !important;
}

.metadata-retriever :deep(.el-select .el-input__wrapper) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.metadata-retriever :deep(.el-slider__runway) {
  background: #2d3a4b !important;
}

.metadata-retriever :deep(.el-slider__bar) {
  background: #409EFF !important;
}

.metadata-retriever :deep(.el-slider__button) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

.metadata-retriever :deep(.el-date-editor) {
  background: #1f2d3d !important;
}

.metadata-retriever :deep(.el-date-editor .el-input__wrapper) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.metadata-retriever :deep(.el-button) {
  background: rgba(31, 45, 61, 0.8) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.metadata-retriever :deep(.el-tag) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-tag--success) {
  background: #1f4838 !important;
  border-color: #2d5a41 !important;
  color: #67C23A !important;
}

.metadata-retriever :deep(.el-tag--primary) {
  background: #1f2f4a !important;
  border-color: #2d4a6b !important;
  color: #409EFF !important;
}

.metadata-retriever :deep(.el-tag--warning) {
  background: #4a3f1f !important;
  border-color: #6b5a2d !important;
  color: #E6A23C !important;
}

.metadata-retriever :deep(.el-pagination) {
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-pagination button) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-pagination button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.metadata-retriever :deep(.el-pager li) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.metadata-retriever :deep(.el-pager li:hover) {
  color: #409EFF !important;
}

.metadata-retriever :deep(.el-pager li.is-active) {
  background: #409EFF !important;
  color: #ffffff !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .selected-details {
    width: 30vw;
  }
  
  .result-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3vh;
  }
}

@media (max-width: 768px) {
  .selected-details {
    width: 90vw;
    right: 5vw;
  }
  
  .quick-time-buttons {
    justify-content: space-between;
  }
  
  .result-details {
    flex-direction: column;
    gap: 0.3vh;
  }
}
</style>